<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <div class="header">
          <span>说明：目前支持学科和关键字条件筛选</span>
          <div>
            <el-button @click="$router.push('/questions/new')" size="mini" type="success" icon="el-icon-edit">新增试题</el-button>
          </div>
        </div>
        <!-- 筛选 -->
        <div>
          <el-row>
            <el-form ref="form" :model="data" size="small" label-width="80px">
              <el-col :span="6">
                <el-form-item label="学科" prop="subjectID">
                  <el-select placeholder="请选择" v-model="data.subjectID" @change="getDirectoryList()">
                    <el-option :label="item.subjectName" :value="item.id" v-for="item in subjectList" :key="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="二级目录" prop="catalogID">
                  <el-select placeholder="请选择" v-model="data.catalogID">
                    <el-option :label="item.label" :value="item.value" v-for="(item, index) in directoryList" :key="index"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="标签" prop="tags">
                  <el-select placeholder="请选择" v-model="data.tags">
                    <el-option :label="item.label" :value="item.value" v-for="(item, index) in tagLIst" :key="index"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="关键字" prop="question">
                  <el-input @change="getDirectionList()" placeholder="根据题干搜索" v-model="data.question"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="试题类型" prop="questionType">
                  <el-select placeholder="请选择" v-model="data.questionType">
                    <el-option :label="item.label" :value="item.value" v-for="item in questionTypeList" :key="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="难度" prop="difficulty">
                  <el-select placeholder="请选择" v-model="data.difficulty">
                    <el-option :label="item.label" :value="item.value" v-for="item in difficultyList" :key="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="方向" prop="direction">
                  <el-select placeholder="请选择" v-model="data.direction">
                    <el-option :label="item" :value="item" v-for="(item, index) in directionList" :key="index"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="录入人" prop="creatorID">
                  <el-select placeholder="请选择" v-model="data.creatorID">
                    <el-option :label="item.username" :value="item.id" v-for="item in creatorList" :key="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="题目备注" prop="remarks">
                  <el-input placeholder="请选择活动区域" v-model="data.remarks"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="企业简称" prop="shortName">
                  <el-input placeholder="请选择活动区域" v-model="data.shortName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <div style="display: flex; width: 100%">
                  <el-form-item label="城市" prop="province" style="width: 80%; margin-right: 2%">
                    <el-select placeholder="请选择" v-model="data.province" @change="getCityList">
                      <el-option :label="item" :value="item" v-for="(item, index) in provinceList" :key="index"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label-width="0" prop="city" style="width: 50%" v-model="data.city">
                    <el-select placeholder="请选择" v-model="data.city">
                      <el-option :label="item" :value="item" v-for="(item, index) in cityList" :key="index"></el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="6">
                <el-form-item style="text-align: right">
                  <el-button @click="clear">清除</el-button>
                  <el-button type="primary" @click="search">搜索</el-button>
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
        </div>
        <!-- 数据总数 -->
        <div>
          <el-alert type="info" show-icon>
            <template #title>数据一共{{ tableData.counts }}条</template>
          </el-alert>
        </div>
        <!-- 列表 -->
        <div>
          <el-table :data="tableData.items" style="width: 100%">
            <el-table-column prop="number" label="试题编号" width="120"> </el-table-column>
            <el-table-column prop="subject" label="学科" width="100"> </el-table-column>
            <el-table-column prop="catalog" label="目录"> </el-table-column>
            <el-table-column prop="questionType" label="题型" width="100">
              <template #default="{ row }">
                <span> {{ row.questionType === '1' ? '单选' : row.questionType === '2' ? '多选' : '简答' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="题干">
              <template #default="{ row }">
                <span v-html="row.question"></span>
              </template>
            </el-table-column>
            <el-table-column prop="addDate" label="录入时间" width="160">
              <template #default="{ row }">
                <span>{{ row.addDate.replace(/(.000Z)/, '').replace('T', ' ') }}</span>
              </template>
            </el-table-column>
            <el-table-column label="难度" width="100">
              <template #default="{ row }">
                <span> {{ row.difficulty === '1' ? '简单' : row.difficulty === '2' ? '一般' : '困难' }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="creator" label="录入人" width="100"> </el-table-column>
            <el-table-column label="操作" width="200">
              <template #default="{ row }">
                <el-button
                type="primary"
                icon="el-icon-view"
                circle
                class="one"
                style="border: 1px solid #409eff; color: #409eff; background-color: #ecf5ff"
                @click="preview(row.id)"
                ></el-button>

                <el-button
                type="success"
                icon="el-icon-edit"
                circle
                class="two"
                style="border: 1px solid #67c23a; color: #67c23a; background-color: #f0f9eb"
                @click="$router.push(`/questions/new?id=${row.id}`)"
                ></el-button>

                <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                class="three"
                @click="del(row.id)"
                style="border: 1px solid #f56c6c; color: #f56c6c; background-color: #fef0f0"
                ></el-button>

                <el-button
                type="warning"
                icon="el-icon-check"
                circle
                class="four"
                @click="sophisticated(row.id)"
                style="border: 1px solid #e6a23c; color: #e6a23c; background-color: #fdf6ec"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="data.page"
            :page-size="data.pagesize"
            layout="sizes, prev, pager, next, jumper"
            :page-sizes="[5, 10, 20, 50]"
            :total="tableData.counts"
          >
          </el-pagination>
        </div>
        <!-- 弹窗 -->
        <div>
          <el-dialog title="题目预览" :visible.sync="dialogVisible" width="900px">
            <el-row>
              <el-col :span="6"
                >【题型】：{{ previewInfo.questionType === '1' ? '单选题' : previewInfo.questionType === '2' ? '多选题' : '简答题' }}</el-col
              >
              <el-col :span="6">【编号】：{{ previewInfo.id }}</el-col>
              <el-col :span="6">【难度】：{{ previewInfo.difficulty === '1' ? '简单' : previewInfo.difficulty === '2' ? '一般' : '困难' }}</el-col>
              <el-col :span="6">【标签】：{{ previewInfo.tags }}</el-col>
              <el-col :span="6">【学科】：{{ previewInfo.subjectName }}</el-col>
              <el-col :span="6">【目录】：{{ previewInfo.directoryName }}</el-col>
              <el-col :span="6">【方向】：{{ previewInfo.direction }}</el-col>
            </el-row>
            <el-divider></el-divider>
            <div>【题干】：<span style="color: #0000ff" v-html="previewInfo.question"></span></div>
            <div v-show="previewInfo.questionType === '1' || previewInfo.questionType === '2'">
              {{ previewInfo.questionType === '1' ? '单选题' : previewInfo.questionType === '2' ? '多选题' : '简答题' }}
              选项：（以下选中的选项为正确答案）
              <div v-if="previewInfo.questionType === '1'">
                <div class="option">
                  <el-radio onClick="javascript:return false" v-for="item in options" :key="item.id" v-model="item.isRight" :label="1">{{
                    item.title
                  }}</el-radio>
                </div>
              </div>
              <div class="option" v-else-if="previewInfo.questionType === '2'">
                <div v-for="item in options" :key="item.id">
                  <el-checkbox onClick="javascript:return false" v-model="item.isRight" :true-label="1" :false-label="0">{{
                    item.title
                  }}</el-checkbox>
                </div>
              </div>
            </div>
            <el-divider></el-divider>
            <div>【参考答案】：<el-button @click="videoOpen = true" type="danger">视频答案预览</el-button></div>
            <div>
              <video width="320" height="240" controls v-show="videoOpen">
                <source :src="previewInfo.videoURL" type="video/mp4" />
              </video>
            </div>
            <el-divider></el-divider>
            <div style="height: 30px; line-height: 30px; display: flex; align-items: center">
              【答案解析】：
              <div v-html="previewInfo.answer"></div>
            </div>
            <el-divider></el-divider>
            <div style="height: 30px; line-height: 30px; display: flex; align-items: center">
              【题目备注】：
              <div v-html="previewInfo.remarks"></div>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
            </span>
          </el-dialog>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { list as getQuestionsList, detail, remove, choiceAdd } from '@/api/hmmm/questions'
import { list as getSubjectList } from '@/api/hmmm/subjects'
import { simple as getDirectoryList } from '@/api/hmmm/directorys'
import { simple as getTagList } from '@/api/hmmm/tags'
import { simple as getUserList } from '@/api/base/users'
import { provinces, citys } from '@/api/hmmm/citys'
import { difficulty, questionType, direction } from '../../api/hmmm/constants'
export default {
  data () {
    return {
      options: [],
      videoOpen: false,
      dialogVisible: false,
      previewInfo: {},
      tableData: [],
      subjectList: [],
      directoryList: [],
      tagLIst: [],
      creatorList: [],
      provinceList: [],
      cityList: [],
      difficultyList: difficulty,
      questionTypeList: questionType,
      directionList: direction,
      data: {
        page: 1,
        pagesize: 5,
        subjectID: '',
        difficulty: '',
        questionType: '',
        tags: '',
        province: '',
        city: '',
        keyword: '',
        remarks: '',
        shortName: '',
        direction: '',
        creatorID: '',
        catalogID: ''
      }
    }
  },
  created () {
    this.getQuestionsList()
    this.getSubjectList()
    this.getProvincesList()
  },
  computed: {},
  methods: {
    async getQuestionsList () {
      const res = await getQuestionsList({
        page: this.data.page,
        pagesize: this.data.pagesize
      })
      console.log(res)
      this.tableData = res.data
    },
    async getSubjectList () {
      const res = await getSubjectList()
      this.subjectList = res.data.items
    },
    async getDirectoryList () {
      const res = await getDirectoryList({ subjectID: this.data.subjectID })
      this.directoryList = res.data
      this.data.catalogID = ''
      this.data.tags = ''
      this.getTagList()
    },
    async getTagList () {
      const res = await getTagList({ subjectID: this.data.subjectID })
      this.tagLIst = res.data
    },
    async getDirectionList () {
      const res = await getUserList({ keyword: this.data.keyword })
      this.creatorList = res.data
    },
    async getProvincesList () {
      const res = await provinces()
      this.provinceList = res
    },
    async getCityList () {
      this.data.city = ''
      const res = await citys(this.data.province)
      this.cityList = res
    },
    clear () {
      this.$refs.form.resetFields()
      this.cityList = ''
      this.data.city = ''
    },
    search () {
      this.getQuestionsList({
        page: this.data.page,
        pagesize: this.data.pagesize,
        subjectID: this.data.subjectID
      })
    },
    handleSizeChange (val) {
      this.data.pagesize = val
      this.getQuestionsList()
    },
    pageChange () {},
    handleCurrentChange (value) {
      this.data.page = value
      this.getQuestionsList()
    },
    async preview (id) {
      console.log(id)
      this.dialogVisible = true
      const res = await detail({ id })
      this.previewInfo = res.data
      console.log(this.previewInfo)
      this.options = res.data.options
      console.log(res.data.options)
    },
    del (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove({ id })
        this.$message.success('删除成功!')
        this.getQuestionsList()
      })
    },
    sophisticated (id) {
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(async () => {
        await choiceAdd({ id, choiceState: 1 })
        this.$message.success('加入精选成功!')
        this.getQuestionsList()
      })
    }
  }
}
</script>

<style scoped lang="scss">
.header {
  display: flex;
  justify-content: space-between;
  span {
    color: rgba($color: red, $alpha: 0.3);
    font-size: 12px;
    height: 50px;
  }
}
.el-select {
  width: 100%;
}
.el-pagination {
  margin-top: 20px;
  text-align: right;
  position: relative;
  ::v-deep .el-pagination__sizes {
    position: absolute;
    right: 8%;
  }
  ::v-deep .el-pagination__jump {
    margin-left: 120px;
  }
}
  .one:hover {
    color: #fff !important;
    background-color: #409eff !important;
  }
  .two:hover {
    color: #fff !important;
    background-color: #67c23a !important;
  }
  .three:hover {
    color: #fff !important;
    background-color: #f56c6c !important;
  }
  .four:hover {
    color: #fff !important;
    background-color: #e6a23c !important;
  }
.el-row {
  .el-col {
    line-height: 40px;
  }
}
.el-divider {
  margin: 8px 0;
  background-color: #000;
}
.option {
  ::v-deep .el-radio {
    display: block;
    line-height: 30px;
  }
  ::v-deep .el-checkbox {
    display: block;
    line-height: 30px;
  }
}
.el-dialog__footer {
  text-align: right;
}
</style>
